<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 智能对话</title>
    <link rel="stylesheet" th:href="@{/css/chat.css}">
    <!-- Markdown渲染库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
    <!-- 代码高亮库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github.min.css">
    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/highlight.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="nav-brand">
                <span>AI 智能助手</span>
            </div>
            <div class="nav-links">
                <a th:href="@{/pages/chat}" class="nav-link active">
                    <span>AI 对话</span>
                </a>
                <a th:href="@{/pages/knowledge-base}" class="nav-link">
                    <span>知识库</span>
                </a>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="layout-container">
                <!-- 左侧参数设置面板 -->
                <aside class="sidebar">
                    <div class="sidebar-header">
                        <h2>对话设置</h2>
                    </div>
                    
                    <div class="settings-section">
                        <div class="setting-group">
                            <label for="chatId">对话ID</label>
                            <input type="text" id="chatId" value="1" placeholder="输入对话ID">
                        </div>
                        
                        <div class="setting-group">
                            <label for="apiType">API类型</label>
                            <select id="apiType">
                                <option value="simple">简单调用</option>
                                <option value="stream">流式调用</option>
                            </select>
                        </div>
                        
                        <div class="setting-group">
                            <button id="clearButton" class="clear-btn">
                                清空对话
                            </button>
                        </div>
                    </div>
                    
                </aside>

                <!-- 右侧对话内容区域 -->
                <div class="chat-area">
                    <div class="chat-messages" id="chatMessages">
                        <div class="welcome-message">
                            <h3>欢迎使用AI智能对话</h3>
                            <p>我是您的AI助手，可以回答各种问题并提供专业建议</p>
                            <p>请在下方输入您的问题，选择合适的API类型并点击发送</p>
                            <div class="welcome-features">
                                <div class="feature-item">快速响应</div>
                                <div class="feature-item">智能理解</div>
                                <div class="feature-item">连续对话</div>
                            </div>
                        </div>
                    </div>

                    <div class="input-container">
                        <div class="input-wrapper">
                            <textarea id="messageInput" placeholder="请输入您的问题..." rows="3"></textarea>
                            <button id="sendButton" class="send-btn">
                                <span class="send-text">发送</span>
                                <span class="loading-spinner" style="display: none;">发送中...</span>
                            </button>
                        </div>
                        <div class="char-count" id="charCount">0/1000</div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 消息提示 -->
    <div class="toast" id="toast" style="display: none;">
        <div class="toast-content">
            <span class="toast-message"></span>
        </div>
    </div>

    <script th:src="@{/js/chat.js}"></script>
</body>
</html>